<template>
	<view>
		<uni-section title="动态加载" type="line" padding>
			<view class="grid-dynamic-box">
				<uni-grid :column="1" :square="false" :highlight="true" @change="change">
					<uni-grid-item v-for="(item, index) in dynamicFormList" :index="index" :key="index">
						<view class="grid-item-box" :style="{'backgroundColor':item.color}">
							<!-- <image :src="item.url" class="image" mode="aspectFill" />
							<text class="text">{{ item.text }}</text> -->
							<!-- <uni-forms ref="baseForm" :modelValue="baseFormData"> -->
							<uni-forms :ref="'from'+index" :modelValue="item">
								<uni-forms-item label="ip" required>
									<uni-easyinput v-model="item.ip" placeholder="请输入主机ip" />
								</uni-forms-item>
								<uni-forms-item label="园区" required>
									<uni-easyinput v-model="item.are" placeholder="请输入主机所在园区" />
								</uni-forms-item>
								<uni-forms-item label="区域" required>
									<uni-easyinput v-model="item.customAre" placeholder="请输入主机区域编号" />
								</uni-forms-item>
								<uni-forms-item label="厂家" required>
									<uni-easyinput v-model="item.factoryOwner" placeholder="请输入主机厂家" />
								</uni-forms-item>
								<uni-forms-item label="系统" required>
									<uni-easyinput v-model="item.projectName" placeholder="请输入主机系统" />
								</uni-forms-item>
								<uni-forms-item label="电机型号" required>
									<uni-easyinput v-model="item.electricalMachinery" placeholder="请输入主机电机型号" />
								</uni-forms-item>
								<uni-forms-item label="变频器型号" required>
									<uni-easyinput v-model="item.converter" placeholder="请输入主机变频器型号" />
								</uni-forms-item>
								<uni-forms-item label="触摸屏型号" required>
									<uni-easyinput v-model="item.hmi" placeholder="请输入主机触摸屏型号" />
								</uni-forms-item>
								<uni-forms-item label="其他描述信息" required>
									<uni-easyinput v-model="item.otherDesc" placeholder="请输入其他描述信息" />
								</uni-forms-item>
							</uni-forms>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<button type="primary" @click="add" plain="true">点击添加一张填写模板</button>
			<button v-if="dynamicList.length !== 0" type="warn" style="margin-top: 15px;" @click="del">点击删除一个模板</button>
			<button type="primary" @click="addHost" class="uni-btn uni-btn-small">提交</button>
		</uni-section>
	</view>
</template>

<script>
	import api from "../../api/api.js"
	import hostlistVue from "../hostlist/hostlist.vue"
	export default {
		data() {
			return {
				// 基础表单数据
				// baseFormData: {
				// 	name: '',
				// 	age: '',
				// 	introduction: '',
				// 	sex: 2,
				// 	hobby: [5],
				// 	datetimesingle: 1627529992399
				// },
				list: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					},
					{
						url: '/static/c9.png',
						text: 'Grid 9'
					}
				],
				createBy: "张三",
				phone: "15323868297",
				updateBy: "张三",
				dynamicFormList: [],
				dynamicList: [{
						ref: "formData1",
						ip: "172.16.0.100",
						are: "台州狂野大陆",
						customAre: "A01",
						factoryOwner: "深圳新岩景观",
						projectName: "雾森系统",
						electricalMachinery: "进口ABB",
						converter: "台达MS300",
						hmi: "威纶通CMT",
						otherDesc: "",

					},
					{
						ref: "formData2",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},
					{
						ref: "formData3",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},
					{
						ref: "formData4",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},
					{
						ref: "formData5",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},
					{
						ref: "formData6",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},
					{
						ref: "formData7",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},
					{
						ref: "formData8",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},
					{
						ref: "formData9",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
					},

				],
				hostList: []
			}
		},
		onShow() {
			uni.getStorage({
				key: api.base.userInfo,
				success: res => {
					this.phone = res.data.phone
					this.username = res.data.username;
					this.createBy = res.data.username;
					this.updateBy = res.data.username;
				},
				complete: data => {
					if (data.data == '') {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}
				}
			})
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `当前为新添加的第${index+1}台主机`,
					icon: 'none'
				})
			},
			add() {
				if (this.dynamicFormList.length < 9) {
					this.dynamicFormList.push({
						ref:"",
						ip: "",
						are: "",
						customAre: "",
						factoryOwner: "",
						projectName: "",
						electricalMachinery: "",
						converter: "",
						hmi: "",
						otherDesc: "",
						createBy: this.createBy,
						phone: this.phone,
						updateBy: this.updateBy,

					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},

			del() {
				this.dynamicFormList.splice(this.dynamicFormList.length - 1, 1)
			},
			addHost() {
				// for (var i = 0; i < dynamicFormList.length; i++) {
				// 	if(dynamicFormList[i].ip){
				// 		hostlist.push({
				// 			ip: dynamicList[i].ip,
				// 			are:  dynamicList[i].are,
				// 			customAre: dynamicList[i].customAre,
				// 			factoryOwner:  dynamicList[i].factoryOwner,
				// 			projectName:  dynamicList[i].projectName,
				// 			electricalMachinery:  dynamicList[i].electricalMachinery,
				// 			converter:  dynamicList[i].converter,
				// 			hmi:  dynamicList[i].hmi,
				// 			otherDesc:  dynamicList[i].otherDesc,
				// 			createBy: this.createBy,
				// 			phone: this.phone,
				// 			updateBy: this.updateBy,
				// 		});
				// 	}
				// }

				api.addHost(this.dynamicFormList).then(res =>{
					uni.showToast({
						icon:'none',
						title:res.msg
					});
					uni.navigateTo({
						url:"/pages/hostlist/hostlist"
					});
				})

			},
		}
	}
</script>

<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	// .example-body {
	// 	/* #ifndef APP-NVUE */
	// 	// display: block;
	// 	/* #endif */
	// }

	.grid-dynamic-box {
		margin-bottom: 15px;

		uni-grid {
			height: 10rpx;
		}
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;

		.image {
			height: 180rpx;
		}
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>